import axios from 'axios';
import React, { Component } from 'react'
import PubSub from 'pubsub-js';

export default class Search extends Component {
  search = async (event) => {
    if(event != 'btn') {
      // 回车搜索
      const {keyCode,target:{value}} = event
      if(keyCode !== 13) return
      if(value.trim() === '') {
          alert('输入不能为空')
          return
      }
    }
    // 获取用户的输入
    const {keywordElement: {value:keyWord}} = this // 连续解构赋值+重命名
    // 发送请求前通知List更新状态
    PubSub.publish('updateList',{
      isFirst: false,
      isLoading: true
    })
    // 发送网络请求
    /* axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        // 发送请求后通知List更新状态
        PubSub.publish('updateList',{
          isLoading: false,
          users: response.data.items
        })
      },
      error => {
        // 请求失败了通知List更新状态
        PubSub.publish('updateList',{
          isLoading: false,
          err: error.message
        })
      }
    ) */
    // fetch关注分离思想
    // fetch未优化
    /* fetch(`/api1/search/users2?q=${keyWord}`).then(
      response => {
        console.log('联系服务器成功了');
        return response.json()
      },
      error => {
        console.log('联系服务器失败了', error);
        return new Promise(()=>{}) // 不加这句断网时会显示数据获取成功，因为断网时走的这句没返回值会继续向下走
      }
    ).then(
      response => {
        console.log('数据获取成功',response);
      },
      error => {
        console.log('数据获取失败',error);
      }
    ) */
    // fetch优化版本1
    /* fetch(`/api1/search/users2?q=${keyWord}`).then(
      response => {
        console.log('联系服务器成功了');
        return response.json()
      }
    ).then(
      response => {
        console.log('数据获取成功',response);
      }
    ).catch(err => console.log(err)) // catch使用后可以去掉上边两个error语句，catch语句用于兜底 */
    // fetch优化最终版
    try {
      const response = await fetch(`/api1/search/users2?q=${keyWord}`)
      const data = await response.json()
      console.log('数据获取成功',data);
      // 发送请求后通知List更新状态
      PubSub.publish('updateList',{
        isLoading: false,
        users: data.items
      })
    } catch (error) {
      console.log('数据获取失败',error);
      // 请求失败了通知List更新状态
      PubSub.publish('updateList',{
        isLoading: false,
        err: error.message
      })
    }
  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索GitHub用户</h3>
        <div>
          <input onKeyUp={this.search} ref={ c => this.keywordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
          <button onClick={() => this.search('btn')}>搜索</button>
        </div>
      </section>
    )
  }
}
